<template>
	<view class="content">
		<view class="store">
			<image src="/static/mine/store.png" mode=""></image>
			<view class="name">{{userInfo.userName}}</view>
		</view>
		<view class="moneyBox">
			<view class="title">付款金额</view>
			<view class="input">
				<text>￥</text>
				<input type="digit" v-model="money"/>
			</view>
			<view class="note" v-if="remark">
				<text>{{remark}}</text>
				<view class="change" @click="addNotice">修改</view>
			</view>
			<view class="note" v-else @click="addNotice">
				添加备注
			</view>
		</view>
		<view :class="money?'actSubmit':'submit'" @click="submit">付款</view>
		
		<passWordPopup :show='isProp' @close='isProp=false' @callBack="pay" />
		
		<uni-popup ref="popup" type="bottom">
			<view class="popupBox">
				<view class="title">添加备注</view>
				<view class="input">
					<input type="text" placeholder="请输入备注" v-model="note" maxlength="20"/>
				</view>
				<view class="button">
					<view class="left" @click="close()">取消</view>
					<view class="right" :class="note?'active':'right'" @click="enter">确认</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import passWordPopup from "@/components/basicComponents/passWordPopup.vue"
	import {
		transferToKllzService,
		getTransferToTxUserNameAvatar
	} from "@/api/api.js"
	export default {
		data() {
			return {
				money:'',
				remark:'',
				note: '',
				userInfo:{},
				isProp: false,
				qrCode:''
			};
		},
		components: {
			passWordPopup,
		},
		onLoad(options) {
			// 在页面加载时，从 query 参数中获取扫码结果
			if (options.data) {
				this.qrCode = decodeURIComponent(options.data);
				console.log(this.qrCode)
				this.getTransferToTxUserNameAvatar(this.qrCode)
			}
		},
		methods:{
			// 获取商家信息
			getTransferToTxUserNameAvatar(qrCode) {
				getTransferToTxUserNameAvatar({
					qrCode: qrCode
				}).then(res => {
					this.userInfo = res.data;
					console.log(this.userInfo);
				})
			},
			addNotice(){
				setTimeout(() => {
					this.$refs.popup.open('bottom')
				}, 100)
			},
			//付款
			submit(){
				if(this.money < 0.1 || !this.money){
					uni.showToast({
						icon:'none',
						title:'请输入有效金额'
					})
					return
				}else{
					this.isProp = true
				}
				
			},
			close(){
				setTimeout(() => {
					this.$refs.popup.close()
				}, 100)
			},
			//备注
			enter(){
				if(!this.note){
					return
				}else{
					this.remark = this.note
					setTimeout(() => {
						this.$refs.popup.close()
					}, 100)
				}
			},
			//确认支付
			pay(payPassword){
				let data = {
					amount:this.money,
					qrCode: this.qrCode,
					tradePasswd:payPassword,
					remark:this.remark
				}
				console.log(data);
				transferToKllzService(data).then(res=>{
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '转账成功'
						})
						this.isProp = false
						uni.switchTab({
							url: '/pages/goodsIndex/index'
						})
					}
				})
			},
			
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F1F1F1;

		.content {
			.store {
				display: flex;
				align-items: center;
				padding: 26rpx;
				margin-top: 62rpx;

				image {
					width: 78rpx;
					height: 78rpx;
				}

				.name {
					margin-left: 20rpx;
				}
			}

			.moneyBox {
				background-color: #fff;
				padding: 59rpx 26rpx;
				border-radius: 30rpx 30rpx 0 0;
				margin-top: 23rpx;

				.input {
					display: flex;
					align-items: center;
					border-bottom: 1rpx solid #E6E6E6;
					padding: 12rpx 0;
					margin-top: 35rpx;

					text {
						font-family: PingFangSC, PingFang SC;
						font-size: 70rpx;
						color: #333333;
						font-weight: 600;
					}

					input {
						font-weight: 600;
						font-size: 80rpx;
						color: #333333;
						line-height: 112rpx;
					}
				}

				.note {
					margin-top: 42rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #576B95;
					display: flex;
					align-items: center;
					margin-top: 42rpx;

					.change {
						font-weight: 500;
						font-size: 28rpx;
						color: #576B95;
						margin-left: 20rpx;
					}

					text {
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}
				}
				
			}
			.submit{
				position: fixed;
				bottom: 100rpx;
				left: 0;
				width:calc(100% - 48rpx);
				margin:0 24rpx;
				text-align: center;
				line-height: 90rpx;
				background-color: #9CE6BF;
				color: #fff;
				border-radius: 50rpx;
			}
			.actSubmit{
				position: fixed;
				bottom: 100rpx;
				left: 0;
				width:calc(100% - 48rpx);
				margin:0 24rpx;
				text-align: center;
				line-height: 90rpx;
				background-color: #04C538;
				color: #fff;
				border-radius: 50rpx;
			}
			.popupBox{
				background-color: #fff;
				border-radius: 30rpx 30rpx 0 0;
				padding: 41rpx 30rpx;
				.title{
					font-weight: 500;
					font-size: 28rpx;
					color: #576B95;
				}
				.input{
					padding: 28rpx 0;
					margin-top: 40rpx;
					border-bottom: 1rpx solid #E6E6E6;
				}
				.button{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 108rpx;
					.left,.right{
						width: 328rpx;
						line-height: 90rpx;
						text-align: center;
						background-color: #F2F2F2;
						border-radius: 50rpx;
						color: #333333;
					}
					.right{
						color: #999999;
					}
					.active{
						background-color: #04C538;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>